/**
* Copyright (c) 2018-present, Chen Guodong
* All rights reserved.
*
* @flow
*/
<template>
  <section class="content">
    <Header :title="projectInfo.title">
      <div class="left" slot="left" @click="goBack">
        <i class="iconfont icon-previewleft" style="font-size: 22px"></i>
      </div>
    </Header>
    <div id="map-content">
    </div>
  </section>
</template>
<script>
import Header from '../../components/Header/Header.vue';
import config from '../../util/config.js';
import { lazyAMapApiLoaderInstance } from "vue-amap";
import {
  reqSearchFamily,
} from "../../api/index.js";
export default {
  data() {
    return {
      projectInfo: {},
      allData: [],
      pointers: {},
      animatePointers: {},
      mapLayers: {}
    };
  },
  mounted() {
    const self = this;
    lazyAMapApiLoaderInstance.load().then(() => {
      self.initMap();
    });
  },
  methods: {
    // 向后台获取数据
    async reqScreenData() {
      this.$store.dispatch('changeLoadingVis', { data: true })
      const self = this;
      const data = await reqSearchFamily({ seqno: this.$router.history.current.query.seqno });
      if (data.code === 1) {
        self.allData = data.data.allItemInfo;
        self.projectInfo = data.data.item;
      } else {
        showMessage(self, "地图数据加载失败", "warning", "警告");
      }
      this.$store.dispatch('changeLoadingVis', { data: false })
    },
    // 初始化地图
    async initMap() {
      const self = this;
      self.mapObj = new AMap.Map('map-content', {
        mapStyle: 'amap://styles/macaron',
        showBuildingBlock: true,
        expandZoomRange: true,
        pitch: 60,
        buildingAnimation: true,
        zoom: 13,
        zooms: [3, 18],
        center: [111.387972, 30.629671],
      });
      // 获取数据
      await this.reqScreenData();
      self.createMarks();

      self.createAreaWall("伍家岗区");

      // 监听地图zoom变化
      this.mapObj.on("zoomchange", () => {
        const zoom = this.mapObj.getZoom();
        if (zoom < config.middleZoom) {
          for (var item in self.pointers) {
            // 清空所有label
            self.pointers[item].setLabel({
              content: ""
            });
          }
        } else {
          for (var item in self.pointers) {
            // 清空所有label
            self.pointers[item].setLabel({
              //label默认蓝框白底左上角显示，样式className为：amap-marker-label
              offset: new AMap.Pixel(25, 5), //右侧
              zIndex: 99,
              content: "<div class='map-label'><span class='map-label-name'>" +
                self.allData.filter(b => b.seqno == item)[0].shortTitle +
                "</span><a href='javascript:void(0)' class='map-label-link' id='label-" +
                item +
                " seqno='" +
                // "</span><a href='/Board/#/screenProject?seqno=WJQ2012-11' class='map-label-link' seqno='" +
                item +
                "'></a></div>"
            });
          }
        }
      });


    },
    // 在地图上创建区域边界
    createAreaWall() {
      const self = this;
      let redPath = [];
      let projectArea = self.projectInfo.area;
      if (projectArea && projectArea.length > 0) {
        projectArea.map(item =>
          redPath.push([Number(item.lng), Number(item.lat)])
        );
      }

      self.mapLayers['redPolygon'] = new AMap.Polygon({
        path: redPath,
        borderWeight: 5, // 线条宽度，默认为 1
        strokeColor: "#ff0000", // 线条颜色
        fillOpacity: 0,
        map: self.mapObj
      });
      self.mapObj.setFitView(self.mapLayers['redPolygon']);
    },
    // 创建marks
    createMarks() {
      const self = this;
      // 先清空所以点和动画点
      const allData = self.allData || [];
      allData.map((item, index) => {
        if (item.location.length < 2) {
          console.log("没有点位信息!");
        } else {
          // 创建一个 Marker 实例,并江点位信息保存在
          let marker = new AMap.Marker({
            position: item.location, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
            offset: new AMap.Pixel(-10, -10),
            zIndex: 3,
            icon: require("../../assets/img/location/" + item.status + ".png") // 添加 Icon 图标 URL
          });
          // 如果项目正在实施中,则添加波动动画
          if (item.status && item.status === "IN_PROGRESS") {
            let markerContent =
              '<div class="ball-scale-multiple"><div></div><div></div><div></div></div>';
            let markerAnimate = new AMap.Marker({
              position: item.location, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
              offset: new AMap.Pixel(-30, 20),
              zIndex: 2,
              content: markerContent,
              map: self.mapObj
            });
            self.animatePointers[item.seqno] = markerAnimate;
          }

          self.mapObj.add(marker);
          self.pointers[item.seqno] = marker; //保存点位信息
        }
      });
    },

    goBack() {
      if (window.history.length <= 1) {
        this.$router.push({ path: '/' })
        return false
      } else {
        this.$router.go(-1)
      }
    },
  },
  components: {
    Header
  }
};

</script>
<style lang='less' scoped>
@import "../../util/theme.less";

.content {
  .be-full();
}

#map-content {
  width: 100%;
  height: calc(~"100% - 46px");
}

</style>
